<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>基于Vue.js的Markdown编辑器DEMO演示</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  
<div id="app-wall" v-bind:class="{'full': isFull}" v-bind:style="{backgroundColor: actualSkin.wall}">
<div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
  <div id="app">
    <header>just-a-file.md
      <div class="buttons"></div>
    </header>
    <div class="editor"> 
      <textarea class="code" autofocus="autofocus" v-model="code" v-bind:style="{color: actualSkin.color}"></textarea>
      <div class="result" v-html="compiledOutput"></div>
      <div class="settings" v-bind:class="{'active': isSettings}"> 
        <h2>Settings<i class="fa fa-window-close-o" @click="isSettings = false"></i></h2>
        <h3>Editor Theme</h3>
        <div class="skin" v-for="skin in skins" v-bind:class="{'active': skin.isActive}" v-bind:style="{background:skin.color}" @click="setSkin(skin)"></div>
        <h3>Screen</h3><span class="toggleView" v-show="!isFull" @click="isFull = true"><i class="fa fa-window-maximize"></i>Full Screen</span><span class="toggleView" v-show="isFull" @click="isFull = false"><i class="fa fa-window-restore"></i>Compact</span>
        <h3>Update</h3><span class="search" @click="updateMe"><i class="fa fa-refresh"></i>Search for updates</span>
        <div class="alert" v-bind:class="{'updating': isUpdating}">
          <div class="text">Hehehe, serious?? You know it's not gonna happen, right?</div>
        </div>
      </div>
    </div>
    <footer v-bind:style="{background:actualSkin.background}">{{ appTitle }}<i class="fa fa-cog" v-bind:class="{'lookme': isSeen}" @click="showSettings"></i></footer>
  </div>
</div>

  <script src='js/vue.min.js'></script>
<script src='js/marked.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
